<template>
<div>
    <h1>我是首页</h1>
    <p>我是home</p>

<!--记住这里是要使用path的绝对路径-->
<router-link to="/home/news">新闻</router-link>
<router-link to="/home/message">消息</router-link>

    <!--子路由显示在首页里面-->
    <router-view></router-view>
</div>

</template>

<script>
export default {
    data () {
        return {
        path:'/home/news'      
        }
    },

//在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等
//用于一进入这个组件就对页面进行跳转
//1、是用于刚计入该页面的时候就能打开消息页面
//2、是当用于进入beforeRouteLeave记录下来的路径（也就是需求）
    activated () {
      this.$router.push(this.path)  
    },


    beforeRouteLeave(to, from, next){
        //将当前组件的路由对象的路径赋值给组件自己作用域中的path属性
        this.path=this.$route.path //记录离开之前的路径  赋值给当前组件的data函数
        next()
    },

    created () {
        console.log('creaeted')
    },
    destroyed () {
        console.log('destoryed')
    },
    methods: {
        aaa(){
            console.log(123)
        }
    }

}
</script>

<style>

</style>
